আমরা এইচটিএমএল এ এইচটিএমএল লিঙ্ক সম্পর্কে জেনেছি অথবা জানি। লিঙ্ক ছাড়া তো ওয়েবসাইটই অচল তাইনা? একটা পেইজ থেকে আরেকটা পেইজে যাওয়ার জন্য দরকার লিঙ্ক। আর একটা ওয়েবসাইটে অনেক গুলো লিঙ্ক থাকে। লিঙ্ক গুলোর সুন্দর ব্যবহারের উপর নির্ভর করে ওয়েব সাইটের সৌন্দর্য্য। এবার আমরা জানব কিভাবে এ লিঙ্ক গুলোকে আরো সুন্দর ভাবে দেখানো যায়।
একটা লিঙ্ক এর চার ধরনের অবস্থা হতে পারে।
a:link – একটি সাধারন লিঙ্ক। যা এখনো ভিজিট করা হয় নি বা যাতে এখনো ক্লিক করা হয়নি।
a:visited – একটি ভিজিটেড লিঙ্ক বা যে লিঙ্ক এ ক্লি করা হয়েছে।
a:hover – আমরা সব সময়ই দেখি একটা লিঙ্ক এর উপর মাউস নিলে ঐ লিঙ্ক এর রঙ পরিবর্তন হয়ে যায়। hover হচ্ছে মাউস একটা লিঙ্ক এর উপর নেওয়ার পরের অবস্থা।
a:active – একটা লিঙ্ক এ ক্লিক করে ধরে রাখা অবস্থা।
উপরের চার ধরনের অবস্থাতে আমরা চার ধরনের সিএসএস রুল ব্যবহার করতে পারি। যেমন সাধারন লিঙ্ক এর জন্য এক ধরনের রঙ, যে লিঙ্কটি ভিজিট হয়ে গেছে তাতে এক ধরনের রঙ hover এ এক ধরনের রঙ এবং ক্লিক করা অবস্থায় এক ধরনের রঙ।
নিচের কোড গুলো দেখুন. আর উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে jsfiddel.net এ দেখতে পারবেন। এবং নিজে নিজে পরিবর্তন করে দেখতে পারবেন।
এখানে দেখুন যে আমাদের লিঙ্কটির নিচে একটি আন্ডারলাইন এসেছে, আমরা চাইলে এটা বাদ দিতে পারি। তার জন্য লিখতে হবে text-decoration:none;
আবার চাইলে মাউসওবারের সময় আন্ডারলাইন দিতে পারি। তার জন্য hover এর সিএসএস রুলে লিখতে হবে text-decoration:underline;
একটা লিঙ্ক এর পেছনে ব্যাকগ্রাউন্ড কালার ও ইচ্ছে করলে আমরা দিতে পারি। ব্যাকগ্রাউন্ড ইমেজও সেট করতে পারি। ফন্ট সাইজ ও সেট করতে পারি। অর্থাৎ এর আগে সিএসএস ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট স্টাইলিং এ যা শিখে আসছি তার সব কিছু প্রয়োগ করতে পারি। আশা করছি আপনারা নিজে নিজে বাকি গুলো দেখে নিতে পারবেন।
No responses to সিএসএস টিউটোরিয়াল – Links [৪র্থ পার্ট]
Be first Make a comment.